<template>
	<view v-if="is_init">
		<uni-popup-input name="新增/编辑" @close="on_close">

			<view class="banmi_input_edit a-c">
				<view class="banmi_input_edit_name">
					<text class="cred">*</text>角色名称
				</view>
				<view class="banmi_input_val">
					<uni-easyinput v-model="find.role_name" placeholder="请输入角色名称">
					</uni-easyinput>
				</view>
			</view>

			<view class="banmi_input_edit    p-b-10">

				<view class="banmi_input_edit_name">
					<text class="cred">*</text>角色权限
				</view>
				<view class="">
					<view class="" style="margin: 10px 0px;" v-for="(item,index) in menu_list" :key="index"
						v-if="item.parent_id==0||item.expand==true">
						<view class="banmi_flex a-c "
							:class="item.depth==1?'m-l-30':item.depth==2?'m-l-60':item.depth==3?'m-l-90':item.depth==4?'m-l-120':'' ">


							<button @click="on_tab(index)" v-if="item.children.length>0"
								class="b_y  banmi_flex a-c j-c c-7 f-30"
								style="width: 35rpx;height: 35rpx;border: solid 2rpx #c0c0c0;margin: 0px 5px;">
								<text style="font-size: 14px;">{{item.depth_to?'-':'+' }}</text>
							</button>

							<view class="">
								<button @click="on_selected(index)" class="b_y banmi_flex a-c j-c c-7"
									style="width: 35rpx;height: 35rpx;border: solid 2rpx #c0c0c0;margin: 0px 5px;font-size: 14px">
									{{item.selected?'✔':'' }}
								</button>
							</view>
							<text class="c-7 f-14" style="margin: 0px 5px;">{{item.menu_name}}</text>
						</view>
					</view>
				</view>
			</view>
			<view class="a-c  p-b-20 banmi_input_edit">
				<view class="banmi_input_edit_name">
				</view>
				<view class="">
					<button @click="on_sava()" type="primary" style="width: 80px;" size="mini">保存</button>
				</view>
			</view>

		</uni-popup-input>


	</view>
</template>

<script>
	import {
		buildMenus,
		getParents,
		patTree,
		getSortMenu
	} from '@/components/uni-data-menu/util.js'
	var find = {
		tel: '',
		account: '',
		nickname: '',
		face: '',
		face_type: 0,
		gender: 0,
		master_oen: 0,
		master_two: 0

	};
	export default {
		components: {},
		props: {

		},
		data() {
			return {
				find: {},
				uid: 0,
				is_init: false,
				nav_list: [],
				img_url: '',
				menu_list: [],

			}
		},

		methods: {
			on_sava() {
				if (!this.find['role_name']) {
					uni.showToast({
						title: '请输入角色名称',
						icon: 'none'
					})
					return
				}
				var selected = 0;
				var ids = '';
				for (var i = 0; i < this.menu_list.length; i++) {
					if (this.menu_list[i]['selected']) {
						selected = 1;
						ids += this.menu_list[i]['menu_id'] + ','
					}
				}
				ids = ids.substring(0, ids.lastIndexOf(','));
				if (selected == 0) {
					uni.showToast({
						title: '请选择角色权限',
						icon: 'none'
					})
					return
				}
				this.ids = ids;
				this.ok_ajax();
			},
			async ok_ajax() {
				var that = this;
				let requestParams = {
					role_name: this.find['role_name'],
					ids: this.ids,
					id: this.id
				};
				const ret = await this.Banmikeji.role_role_add(requestParams);
				uni.showToast({
					title: ret.msg,
					icon: 'none'
				})
				if (ret.status == 200) {
					that.$emit('confirm')
					that.on_close()
				}

			},
			menu_selected_a(parent_id) {
				for (var i = 0; i < this.menu_list.length; i++) {
					if (parent_id == this.menu_list[i]['menu_id']) {
						var parent_ids = this.menu_list[i]['parent_id']
					}
				}
			},
			menu_selected_menu(menu_id, type) {
				for (var i = 0; i < this.menu_list.length; i++) {
					if (menu_id == this.menu_list[i]['parent_id']) {
						if (type == 1) {
							this.menu_list[i]['selected'] = true;
						} else {
							this.menu_list[i]['selected'] = false;
						}
						var menu_ids = this.menu_list[i]['menu_id'];

						this.menu_selected_menu(menu_ids, type);

					}
				}
			},
			menu_selected(parent_id) {
				for (var i = 0; i < this.menu_list.length; i++) {
					if (parent_id == this.menu_list[i]['menu_id']) {
						var parent_ids = this.menu_list[i]['parent_id']
						this.menu_list[i]['selected'] = true;
						if (parent_ids > 0) {
							this.menu_selected(parent_ids);
						}
					}
				}
			},
			on_selected(index) {
				var parent_id = this.menu_list[index]['parent_id']; // 我的上级
				var menu_id = this.menu_list[index]['menu_id']; //我的id
				this.menu_list[index]['selected'] = !this.menu_list[index]['selected'];
				var selected = 1
				for (var i = 0; i < this.menu_list.length; i++) {
					if (this.menu_list[i]['selected'] == true && parent_id == this.menu_list[i]['parent_id']) {
						selected = 0;
					}
				}
				if (selected == 0) {
					this.menu_selected(parent_id);
				} else {
					this.menu_selected_a(parent_id);
				}
				var type = 0;
				if (this.menu_list[index]['selected']) {
					var type = 1;
				}
				this.menu_selected_menu(menu_id, type);
			},
			on_tab(index, url) {
				let that = this;
				var num = this.menu_list[index]['children'].length
				var id = this.menu_list[index]['menu_id'];

				if (num == 0) { //没有二级列表
					this.mane_index = index;
					//顶部已打开的导航
					var type = 0;
					for (var i = 0; i < this.top_list.length; i++) {
						if (this.top_list[i]['menu_id'] == id) {
							var type = 1;
						}
					}
					if (type == 0) {
						this.top_list.push(this.menu_list[index]);
					}

					uni.$emit('banmi_top', {
						top_list: this.top_list,
						top_id: id,
						find: this.menu_list[index]
					});

					return
				}
				var parent_id = this.menu_list[index]['menu_id']; //我的id
				var expand = this.menu_list[index]['expand'];
				var menu_id = this.menu_list[index]['parent_id']; //我的上级
				var depth = this.menu_list[index]['depth']; //层级
				this.menu_list[index]['depth_to'] = !this.menu_list[index]['depth_to'];
				this.menu_list.forEach(function(item, index, arr) {
					if (item['expand'] == true) { //已展开，闭合
						if (parent_id != item['menu_id'] && item['parent_id'] != menu_id && depth < 2) {
							item['expand'] = false;
						} else {
							if (item['parent_id'] == parent_id) {
								item['expand'] = false;
							}
						}
					} else {
						item['expand'] = item['parent_id'] == parent_id ? true : false;
					}

					if (menu_id == 0 && menu_id != item['menu_id'] && parent_id != item['menu_id']) {
						item['depth_to'] = false;
					}
					if (item['depth_to'] && menu_id > 0) {
						if (menu_id == item['parent_id'] && parent_id != item['menu_id']) {
							item['depth_to'] = false;
						}
					}
					arr[index] = item;
				});
				this.$forceUpdate()
			},
			async init_menu_list() {
				var that = this;
				let requestParams = {
					id: this.id,
				};
				const ret = await this.Banmikeji.role_lists(requestParams);
				if (ret.status == 200) {
					var menu_list = ret.data.list;
					this.onqueryload(menu_list);
					this.is_jia = true;
				}
			},
			//多级树
			onqueryload(data) {
				for (var i = 0; i < data.length; i++) {
					let item = data[i]
					const depth = getParents(data, item.menu_id)
					item.name = item.name
					item.depth = depth
				}
				const menuTree = getSortMenu(data)
				const sortMenus = []
				patTree(menuTree, sortMenus)
				data.length = 0;
				data.push(...sortMenus)
				this.menu_list = data //仅导出当前页
			},
			async init(id) {
				var that = this;
				this.id = 0;
				if (id == 0) {
					this.is_init = true;
					this.init_menu_list();
					return
				}
				this.id = id;
				this.init_menu_list();
				let requestParams = {
					id: this.id,
				};
				const ret = await this.Banmikeji.role_role_edit(requestParams);
				if (ret.status == 200) {
					this.find = ret.data.find;
					var list = ret.data.list;
					this.is_init = true;
				}

			},
			on_close() {
				this.find = {}
				this.is_init = false;
			},
			//js分类方法

		}
	}
</script>

<style>
	/* 	button::after {
		border: none;
	} */

	.top_head {
		background-color: #F8F8F8;
		width: 100%;
		top: 0;
		left: 0;
		z-index: 999;
		position: sticky
	}

	.but {
		width: 120rpx;
		height: 100rpx;
		padding: 0;
		border: 0;
		background-color: transparent;
		outline: none;
	}

	button {
		padding: 0;

		/* 	background: transparent; */
	}

	.top_but {
		background-color: #F8F8F8;
		width: 100%;
		height: 100rpx;
		top: 0;
		left: 0;
		z-index: 999;
		position: sticky
	}

	.zu_but {
		position: fixed;
		height: 100rpx;
		z-index: 999;
		background-color: #F8F8F8;
		bottom: 288rpx;
	}

	.option_box {
		width: 35rpx;
		height: 35rpx;
		border: 1rpx solid #999999;
		border-radius: 5px;
		margin-right: 10rpx;
		// background-color: #FF852A;
		display: flex;
		justify-content: center;
		align-items: center;

		image {
			width: 20rpx;
			height: 20rpx;
		}
	}

	.option_box_active {
		background: linear-gradient(-30deg, #ff7029 0%, #faa307 100%);
		border: 1rpx solid #faa307 !important;
	}

	.sub_btn_add {
		margin-left: 30rpx;
		width: 150rpx;
		height: 60rpx;
		background: linear-gradient(-30deg, #A9A9A9 0%, #A9A9A9 100%);
		border-radius: 44rpx;

		font-size: 30rpx;
		font-weight: 700;
		color: #ffffff;

		line-height: 60rpx;
	}

	.sub_btn {

		height: 70rpx;
		width: 100rpx;
		background: #0071FE;
		border-radius: 10rpx;
		font-size: 30rpx;
		color: #ffffff;
		line-height: 70rpx;
	}
</style>